import { Button, Form, Input, message } from 'antd';
import React from 'react'
import { Link, useNavigate } from 'react-router-dom';
import { ajax } from '../../api';
import { UserOutlined, LockOutlined,PhoneOutlined } from '@ant-design/icons';
import { reg } from '../../utils/validate';
import './index.scss'
export default function Register() {
  return (
    <div className='padding10'>
    <div style={{width:"100%",height:"1rem",marginBottom:"0.1rem",display:"flex",justifyContent:"space-around"}}>
       <div style={{width:"60%",height:"auto"}}>
       <img src={require('../../assets/images/logo1.png')} style={{width:"100%",height:"auto",marginBottom:"0.1rem"}} alt="" />
        <p style={{textAlign:"center",fontSize:"0.16rem",color:"#333",marginBottom:0}}>欢迎你的加入</p>
       </div>
    </div>
    <div className='login_cont'>
      <Demo></Demo>
    </div>
    <div style={{width:"100%",boxSizing:"border-box"}} >
      <p style={{textAlign:"center",width:"100%",margin:0,marginTop:"0.15rem",fontSize:"0.14rem",color:"#333"}}>从这里出发，开启新世界，让科技改变生活</p>
    </div>
</div>
  )
}
const Demo = () => {
  const navigate =  useNavigate()
  const onFinish = async (values: any) => {
    if(values.password==values.dbpassword){
      values.role=1
      let res=await ajax.register(values)
      console.log(res);
      if(res.code==200){
        setTimeout(()=>{
          navigate(`/login?username=${values.username}&phone=${values.phone}`)
        },1500)
      }
    }else{
      message.error('两次输入密码不同');
    }
    
    console.log(values);
    
  };

  const onFinishFailed = (errorInfo: any) => {
    message.error('请输入正确的表单信息');
  };

  return (
    <Form
      name="basic"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        
        name="username"
        rules={[{ required: true, message: '用户名不能为空' }]}
      >
        <Input 
         prefix={<UserOutlined className="site-form-item-icon" />}
         placeholder="请输入用户名"
         allowClear
         size="large"
         style={{borderRadius:"0.1rem"}}
        />
      </Form.Item>
      <Form.Item
        
        name="phone"
        rules={[{ required: true, message: '手机号不能为空' },{pattern:reg.phone,message:"请输入正确的手机号格式"}]}
      >
        <Input 
         prefix={<PhoneOutlined className="site-form-item-icon" />}
         placeholder="请输入电话号码"
         allowClear
         size="large"
         style={{borderRadius:"0.1rem"}}
        />
      </Form.Item>

      <Form.Item
        
        name="password"
        rules={[{ required: true, message: '密码不能为空' },{ pattern: reg.pwd, message: '密码为6到16位的字母和数字组合' }]}
      >
        <Input.Password 
         prefix={<LockOutlined className="site-form-item-icon" />}
         placeholder="请输入密码"
         allowClear
         size="large"
         style={{borderRadius:"0.1rem"}}
        />
      </Form.Item>
      <Form.Item
        
        name="dbpassword"
        rules={[{ required: true, message: '确认密码不能为空' },{ pattern: reg.pwd, message: '密码为6到16位的字母和数字组合' }]}
      >
        
        <Input.Password 
         prefix={<LockOutlined className="site-form-item-icon" />}
         placeholder="请输入确认密码"
         allowClear
         size="large"
         style={{borderRadius:"0.1rem"}}
        />
      </Form.Item>
      <Form.Item
       
         style={{color:'#fff',display:"flex",justifyContent:'space-between'}}
        >
          <Link to="/login">已有账号，前往登录</Link >
          <Link to="/forgetPass">忘记密码</Link >
        </Form.Item>


      <Form.Item 
      style={{margin:0}}
      >
        <Button type="primary" htmlType="submit" block style={{width:"100%",borderRadius:"0.1rem"}}>
          注册
        </Button>
      </Form.Item>
    </Form>
  );
};